<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app-7">
      <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
  -->
  <todo-item
  v-for="item in groceryList"
  v-bind:todo="item"
  v-bind:key="item.id">
</todo-item>
</ol>
<p>{{ h }}</p>
<p  v-html='h'></p>
<p v-if="ok">{{  now }}</p>
</div>

<div :title="data"></div>

<div id="demo">{{ fullName }}</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> 
    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })

    var app7 = new Vue({
      el: '#app-7',
      data: {
        groceryList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '随便其它什么人吃的东西' }
        ],
        h:"<span style='color:red;'>this should be red</span>",
        ok:true,
    },
    computed: {
    // 计算属性的 getter
    now: function () {
      var date = new Date()
      return  date.toLocaleString()
  }
}
})


//     var vm = new Vue({
//       el: '#demo',
//       data: {
//         firstName: 'Foo',
//         lastName: 'Bar',
//         fullName: 'Foo Bar'
//     },
//     watch: {
//         firstName: function (val) {
//           this.fullName = val + ' ' + this.lastName
//       },
//       lastName: function (val) {
//           this.fullName = this.firstName + ' ' + val
//       }
//   }
// })

    var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})
</script>